<template>
  <div class="rt-container mobile-matrix-select">
    <div v-for="row in table.rows" class="card" :key="row.id">
      <van-cell class="block-title" :title="row.label" />
      <div class="card-body">
        <template v-if="multiple">
          <van-checkbox-group v-model="dataValue[row.id]" direction="horizontal" @change="handleChange">
            <van-checkbox v-for="col in table.columns" :key="col.id" :name="col.label" shape="square">
              {{ col.label }}
            </van-checkbox>
          </van-checkbox-group>
        </template>
        <template v-else>
          <van-radio-group v-model="dataValue[row.id]" direction="horizontal" @change="handleChange">
            <van-radio v-for="col in table.columns" :key="col.id" :name="col.label">
              {{ col.label }}
            </van-radio>
          </van-radio-group>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from '../mixin'
import 'vant/lib/cell/style'
import 'vant/lib/cell-group/style'
import 'vant/lib/radio/style'
import 'vant/lib/radio-group/style'
import 'vant/lib/checkbox/style'
import 'vant/lib/checkbox-group/style'

import { Cell, CellGroup, RadioGroup, Radio, Checkbox, CheckboxGroup } from 'vant'

export default {
  name: 'MobileMatrixSelect',
  mixins: [mixin],
  components: {
    VanCell: Cell,
    VanCellGroup: CellGroup,
    VanRadioGroup: RadioGroup,
    VanRadio: Radio,
    VanCheckbox: Checkbox,
    VanCheckboxGroup: CheckboxGroup
  },
  props: {
    table: {
      type: Object,
      default: () => {}
    },
    multiple: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 矩阵单选默认数据结构 {"1":"选项1","2":"选项1","3":"选项1","1636537741435":"选项1"}
      // 矩阵多选默认数据结构 {"1":["选项1","选项2","选项3"],"2":["选项1","选项2","选项3"],"3":["选项1","选项2","选项3"]}
      dataValue: {},
      value: ''
    }
  },
  watch: {
    table: {
      handler(value) {
        this.initValue()
      },
      deep: true
    },
    multiple: {
      handler(value) {
        this.initValue()
      }
    }
  },
  created() {
    this.initValue()
  },
  methods: {
    // 初始化矩阵value为二维数组
    initValue() {
      let initValue = {}
      // 如果为多选
      if (this.multiple) {
        this.table.rows.forEach((row, index) => {
          if (this.value[row.id]) {
            initValue[row.id] = this.value[row.id]
          } else {
            initValue[row.id] = new Array()
          }
        })
      } else {
        initValue = this.value
      }
      this.dataValue = initValue
    },
    handleChange() {
      this.value = this.dataValue
      this.$emit('change', this.value)
    }
  }
}
</script>

<style lang="scss">
.mobile-matrix-select {
  .card {
    background-color: #fafafa;

    .card-body {
      padding: 10px 16px 0;
      margin-bottom: 10px;
    }

    .van-cell-group {
      background-color: transparent;
      margin-bottom: 10px;
    }

    .van-cell {
      background: transparent;
    }

    .block-title {
      .van-cell__title {
        font-weight: bold;
      }
    }
  }

  .van-radio,
  .van-checkbox {
    margin-bottom: 10px;
  }
}
</style>
